<template>
  <div>
    <slot name="pagination">
      <Pagination
        :paginationBut="paginationBut"
        :page.sync="currentPage"
        :limit.sync="pageSize"
        v-bind="$attrs"
        :showTips="false"
        @pagination="pagination"
      >
        <el-button v-if="isShowBut('add')" size="mini" @click="add">
          <div class="but_text">
            <i class="el-icon-document-add"></i>
            新建
          </div>
        </el-button>
        <el-button v-if="isShowBut('reload')" size="mini" @click="reload">
          <div class="but_text">
            <i class="el-icon-refresh"></i>
            刷新
          </div>
        </el-button>
        <el-button v-if="isShowBut('edit')" size="mini" @click="edit">
          <div class="but_text">
            <i class="el-icon-edit"></i>
            编辑
          </div>
        </el-button>
        <el-button v-if="isShowBut('del')" size="mini" @click="del">
          <div class="but_text">
            <i class="el-icon-delete"></i>
            删除
          </div>
        </el-button>
        <slot name="pageBefore"></slot>
        <slot name="page"></slot>
      </Pagination>
    </slot>

    <div style="height: 16px"></div>
    <ActiveTable
      ref="ActiveTableDom"
      :border="tableBorder"
      :rowKey="showRowKey"
      :data="tableData"
      :select="select"
      :showTableBut="showTableBut"
      :radioSelect="radioSelect"
      @linkItem="linkItem"
      @selectChange="selectChange"
      @tableButClick="tableButClick"
    >
      <template slot="frist">
        <slot name="table_frist"></slot>
      </template>
      <template slot="last">
        <slot name="table_last"></slot>
      </template>
    </ActiveTable>
  </div>
</template>

<script>
import Pagination from '../Pagination/index.vue'
import ActiveTable from '../ActiveTable/index.vue'

export default {
  name: 'PagerTabel',
  props: {
    // 分页组件显示的功能 id
    paginationBut: {
      type: String,
      default: 'first,prev,jumper,next,last'
    },
    // 分页操作，表格操作显示的按钮 id
    showBut: {
      type: String,
      default: 'add,reload,del,rowSet,look'
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    },
    // 是否显示左侧选择框
    select: {
      type: Boolean,
      default: true
    },
    // 是否单选
    radioSelect: {
      type: Boolean,
      default: true
    },
    // 表格边框
    tableBorder: {
      type: Boolean,
      default: true
    },
    tableData: {
      type: Array,
      default: () => []
    },
    rowKey: {
      type: Array,
      default: () => []
    }
  },
  components: {
    Pagination,
    ActiveTable
  },
  data() {
    return {
      checkList: [],
      userSelectList: [],
      tableBut: [
        { icon: 'icon-search', name: '查看', type: 'look' },
        { icon: 'icon-shoucang1', name: '收藏', type: 'collection' },
        { icon: 'icon-wodeguanzhu', name: '关注', type: 'focus' }
      ]
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    },
    showRowKey() {
      return this.rowKey.filter((item) => !item.hide && this.checkList.includes(item.key))
    },
    showTableBut() {
      let showList = this.showBut.split(',')
      return this.tableBut.filter((item) => showList.includes(item.type))
    }
  },
  watch: {
    rowKey(v) {
      this.checkList = v.map((item) => item.key)
    }
  },
  created() {
    this.checkList = this.rowKey.map((item) => item.key)
  },
  methods: {
    //默认勾选(传入row)
    checkedHandler(row) {
      this.$refs.ActiveTableDom.toggleRowSelection(row, true)
    },
    // 查看详情
    linkItem({ row, key }) {
      this.$emit('tableButClick', { row, type: 'look', key })
    },
    isShowBut(id) {
      return this.showBut.split(',').includes(id)
    },
    // 表格按钮点击
    tableButClick({ row, type }) {
      console.log(row, type, '-->>> row, type')
      this.$emit('tableButClick', { row, type })
    },
    pagination({ page, limit }) {
      this.$emit('pagination', { page, limit })
    },
    del() {
      if (!this.userSelectList.length) {
        return this.$message.info('请选择要删除的数据')
      }
      this.$emit('del', this.userSelectList)
    },
    add() {
      this.$emit('add')
    },
    reload() {
      this.$emit('reload')
    },
    edit() {
      if (!this.userSelectList.length) {
        return this.$message.info('请选择要编辑的数据')
      }
      this.$emit('edit', this.userSelectList[0])
    },
    // 用户勾选
    selectChange(e) {
      this.userSelectList = e
      this.$emit('selectChange', e)
    }
  }
}
</script>

<style lang="scss" scoped></style>
